/*
 * @Author: hongbin
 * @Date: 2022-09-09 21:08:20
 * @LastEditors: hongbin
 * @LastEditTime: 2023-03-31 10:00:21
 * @Description:userProfile 用户中心
 */
import { FC } from "react";
import styled from "styled-components";
import SEOHeader from "../src/components/SEO";
import BaseInfo from "../src/components/UserProfile/BaseInfo";
import ContactCard from "../src/components/UserProfile/ContactCard";
import FriendManage from "../src/components/UserProfile/FriendManage";
import { useAuth } from "../src/context/AuthProvide";
import { UserInfo } from "../src/hook/useRegisterForm";
import { flexCenter } from "../src/styled";

interface IProps {}

const UserProfile: FC<IProps> = () => {
    const { user } = useAuth();

    if (!user._id) return null;

    return (
        <Container>
            <SEOHeader title="个人中心" />
            <BaseInfo user={user as UserInfo} />
            <ContactCard user={user} />
            <FriendManage friends={user.friendsList || []} />
        </Container>
    );
};

export default UserProfile;

const Container = styled.div`
    width: 100vw;
    height: 100vh;
    overflow: hidden scroll;
    padding: 1vh 1vw;
    text-shadow: 2px 2px 3px #444;
    ${flexCenter};
    /* align-items: normal; */
    flex-wrap: wrap;
    box-shadow: inset 10px 10px 14px 13px #188a04, inset -10px -10px 14px 13px #188a04;
    button {
        cursor: pointer;
        text-shadow: 2px 2px 5px #25252547;
        padding: 1vmin 1vmax;
        font-size: max(1vw, 14px);
        --clay-background: #10d406;
        color: #033c00;
        font-weight: 700;
        border: none;
        margin-bottom: 5px;
        /* border: 1px solid #000000; */
        background: var(--clay-background, rgba(0, 0, 0, 0.005));
        border-radius: var(--clay-border-radius, 1vmin);
        box-shadow: var(--clay-shadow-outset, 8px 8px 16px 0 rgba(0, 0, 0, 0.25)),
            inset var(--clay-shadow-inset-primary, -8px -8px 16px 0 rgba(0, 0, 0, 0.25)),
            inset var(--clay-shadow-inset-secondary, 8px 8px 16px 0 hsla(0, 0%, 100%, 0.2));
    }
    & > div {
        margin: 1vmin 1vmax;
        padding: 2vmin;
        background: var(--clay-background, rgba(0, 0, 0, 0.005));
        border-radius: var(--clay-border-radius, 32px);
        box-shadow: var(--clay-shadow-outset, 8px 8px 16px 0 rgba(0, 0, 0, 0.25)),
            inset var(--clay-shadow-inset-primary, -8px -8px 16px 0 rgba(0, 0, 0, 0.25)),
            inset var(--clay-shadow-inset-secondary, 8px 8px 16px 0 hsla(0, 0%, 100%, 0.2));
    }
    .td {
        margin: 1vmin 1vmax;
        background: var(--clay-background, rgba(0, 0, 0, 0.005));
        border-radius: var(--clay-border-radius, 32px);
        box-shadow: var(--clay-shadow-outset, 8px 8px 16px 0 rgba(0, 0, 0, 0.25)),
            inset var(--clay-shadow-inset-primary, -8px -8px 16px 0 rgba(0, 0, 0, 0.25)),
            inset var(--clay-shadow-inset-secondary, 8px 8px 16px 0 hsla(0, 0%, 100%, 0.2));
    }
`;
